<template>
  <div class="tips-box flex flex-js-c screen-width">
    <div class="center-front ">
      温馨提示：您当前是游客身份，暂无查看内容的权限，请您先 或 登录 或 注册
    </div>
  </div>
  <section class="container">
    <div class="clothing-box">
      <div class="top-filter-box">
        <div class="content-box">
          <div class="top-filter-left flex">
            <div>全部店铺</div>
          </div>
          <div class="top-filter-right flex">
            <div class="item-one flex">
              <div class="front">隐藏筛选条件</div>
              <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 16 11" fill="none">
                  <path d="M3.0105 1.5L1.5 1.5C0.673 1.5 -3.8584e-07 2.173 -3.49691e-07 3C-3.13542e-07 3.827 0.673 4.5 1.5 4.5L3.0105 4.5C3.468 5.1045 4.1845 5.5 5 5.5C5.8155 5.5 6.532 5.1045 6.9885 4.5L14.5 4.5C15.327 4.5 16 3.827 16 3C16 2.173 15.327 1.5 14.5 1.5L6.9885 1.5C6.5325 0.896499 5.8155 0.5 5 0.5C4.1845 0.5 3.468 0.896499 3.0105 1.5ZM1.5 3.5C1.36739 3.5 1.24021 3.44732 1.14645 3.35355C1.05268 3.25978 1 3.13261 1 3C1 2.86739 1.05268 2.74021 1.14645 2.64645C1.24021 2.55268 1.36739 2.5 1.5 2.5L2.55 2.5C2.48369 2.83004 2.48369 3.16996 2.55 3.5L1.5 3.5ZM14.5 2.5C14.6326 2.5 14.7598 2.55268 14.8536 2.64645C14.9473 2.74021 15 2.86739 15 3C15 3.13261 14.9473 3.25978 14.8536 3.35355C14.7598 3.44732 14.6326 3.5 14.5 3.5L7.449 3.5C7.51772 3.17021 7.51772 2.82979 7.449 2.5L14.5 2.5ZM5.42 1.5675C5.4465 1.5755 5.4725 1.583 5.499 1.592C5.62997 1.63754 5.75386 1.70133 5.867 1.7815L5.875 1.7885C5.99381 1.87532 6.0994 1.97889 6.1885 2.096L6.1925 2.101C6.2835 2.222 6.3565 2.356 6.4075 2.5005C6.46717 2.66035 6.49847 2.82939 6.5 3C6.49859 3.17083 6.46711 3.34009 6.407 3.5C6.35563 3.64547 6.28173 3.78196 6.188 3.9045C6.09919 4.02215 5.99356 4.1261 5.8745 4.213L5.8665 4.22C5.75321 4.29966 5.62934 4.3631 5.4985 4.4085C5.472 4.4185 5.446 4.425 5.4195 4.433C5.28364 4.47549 5.14234 4.49806 5 4.5C4.8525 4.5 4.713 4.4725 4.579 4.4325C4.5525 4.4245 4.5265 4.418 4.501 4.408C4.369 4.361 4.244 4.2995 4.132 4.2195L4.124 4.2125C4.006 4.1255 3.8995 4.022 3.8105 3.904L3.8065 3.899C3.7165 3.779 3.6435 3.644 3.5915 3.4995C3.53255 3.33949 3.50159 3.17052 3.5 3C3.5 2.824 3.536 2.657 3.592 2.5C3.64443 2.355 3.71824 2.21866 3.811 2.0955C3.9 1.9785 4.0065 1.875 4.1245 1.788L4.1325 1.781C4.245 1.7 4.37 1.6395 4.5015 1.5915C4.527 1.5825 4.5535 1.575 4.5795 1.567C4.713 1.5275 4.8525 1.5 5 1.5C5.1465 1.5 5.286 1.5275 5.42 1.5675ZM9.0105 7L1.5 7C0.673 7 -1.45428e-07 7.673 -1.09278e-07 8.5C-7.31292e-08 9.327 0.673 10 1.5 10L9.0105 10C9.4675 10.604 10.1845 11 11 11C11.8155 11 12.532 10.604 12.9885 10L14.5 10C15.327 10 16 9.327 16 8.5C16 7.673 15.327 7 14.5 7L12.9885 7C12.5325 6.3965 11.8155 6 11 6C10.1845 6 9.468 6.3965 9.0105 7ZM1.5 9C1.36739 9 1.24021 8.94732 1.14645 8.85355C1.05268 8.75979 1 8.63261 1 8.5C1 8.36739 1.05268 8.24021 1.14645 8.14645C1.24021 8.05268 1.36739 8 1.5 8L8.55 8C8.48349 8.33002 8.48349 8.66998 8.55 9L1.5 9ZM14.5 8C14.6326 8 14.7598 8.05268 14.8536 8.14645C14.9473 8.24021 15 8.36739 15 8.5C15 8.63261 14.9473 8.75978 14.8536 8.85355C14.7598 8.94732 14.6326 9 14.5 9L13.449 9C13.5175 8.67019 13.5175 8.32981 13.449 8L14.5 8ZM11.42 7.0675C11.4465 7.0755 11.4725 7.083 11.499 7.092C11.63 7.13754 11.7539 7.20133 11.867 7.2815L11.875 7.2885C11.9938 7.37532 12.0994 7.47889 12.1885 7.596L12.1925 7.601C12.2835 7.722 12.3565 7.856 12.4075 8.0005C12.4672 8.16035 12.4985 8.32939 12.5 8.5C12.5 8.6765 12.464 8.843 12.407 9C12.3563 9.14342 12.2838 9.27817 12.192 9.3995L12.188 9.4045C12.099 9.52188 11.9934 9.62564 11.8745 9.7125L11.8665 9.7195C11.7532 9.79931 11.6294 9.86292 11.4985 9.9085C11.472 9.918 11.446 9.925 11.4195 9.933C11.2836 9.97549 11.1423 9.99806 11 10C10.8525 10 10.713 9.9725 10.579 9.9325C10.5525 9.9245 10.5265 9.9175 10.501 9.908C10.369 9.8605 10.244 9.7995 10.132 9.719L10.124 9.712C10.006 9.625 9.8995 9.5215 9.8105 9.404L9.8065 9.399C9.7165 9.2785 9.6435 9.144 9.5915 8.9995C9.536 8.843 9.5 8.6765 9.5 8.5C9.5 8.324 9.536 8.157 9.592 8C9.64443 7.855 9.71824 7.71866 9.811 7.5955C9.9 7.4785 10.0065 7.375 10.1245 7.288L10.1325 7.281C10.245 7.2 10.37 7.1395 10.5015 7.0915C10.527 7.0825 10.5535 7.075 10.5795 7.067C10.713 7.0275 10.8525 7 11 7C11.1465 7 11.286 7.0275 11.42 7.0675Z" fill="#222222"/>
                </svg>
              </div>
            </div>
            <div class="item-two flex">
              <div class="front">
                排序依据
              </div>
              <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">
                  <path d="M-2.96908e-08 0.679245C-2.20927e-08 0.505421 0.063755 0.331577 0.191265 0.198933C0.446306 -0.066312 0.859816 -0.066312 1.11486 0.198933L7.99999 7.36015L14.8851 0.198934C15.1402 -0.0663114 15.5537 -0.0663114 15.8087 0.198934C16.0638 0.464222 16.0638 0.894269 15.8087 1.15956L8.46179 8.80107C8.20675 9.06631 7.79326 9.06631 7.53822 8.80107L0.191285 1.15956C0.063755 1.02691 -3.72888e-08 0.853068 -2.96908e-08 0.679245Z" fill="#222222"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center-container">
        <!--   左侧内容   -->
        <div class="left-side">
          <!--   全部服装    -->
          <div class="all-clothing">
            <div class="clothing-item">女装</div>
            <div class="clothing-item">男装</div>
            <div class="clothing-item">家纺</div>
            <div class="clothing-item">内衣</div>
            <div class="clothing-item">饰品</div>
            <div class="clothing-item">运动服</div>
          </div>
        </div>
        <!--   右侧内容   -->
        <div class="right-side">
          <div class="right-img-text">
            <template v-for="(item, index) in shopModule.shopMessage" :key="index">
              <div class="item-one flex" @click="shopModule.toDetails(index)">
                <div class="img-box">
                  <img src="../../assets/images/shopImage01.png" alt="">
<!--                  <img :src="item.image">-->
                </div>
                <div class="shop-box">
                  <div class="shop-name">{{item.shopName}}</div>
                  <div class="shop-introduce">{{item.shopIntroduce}}</div>
                  <div class="shop-images flex">
                    <template v-for="(item, index) in item.shopImages.slice(0, 4)">
                      <div class="item-img-box">
                        <img src="../../assets/images/brandImage01.png" alt="">
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
<!--            <div class="item-one">-->
<!--              <div class="img-box">-->
<!--                <img src="../../assets/images/clothing-one.png" alt="">-->
<!--              </div>-->
<!--              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>-->
<!--            </div>-->
<!--            <div class="item-one position-relative"-->
<!--                 style="height: 100%;width: 100%;font-size: 30px"-->
<!--                 v-permissionCover="['1','2', '3']"-->
<!--              <div class="img-box">-->
<!--                <img src="../../assets/images/clothing-one.png" alt="">-->
<!--              </div>-->
<!--              <div class="front-box">【语舒秋寒】2024潮流时尚女装</div>-->
<!--            </div>-->

          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { getApp } from '@/common/hooks';
import { Messages } from '@/components/Warm/Popup';
import { Language } from '@/common/lang';
import Layout from "@/layout/index.vue";

export default defineComponent({
  name: "clothing",
  components: {
    Layout

  },
  data() {
    return {

    }
  },
  setup() {
    const { proxy } = getApp(["Vm"]).Vm!;
    const { Router } = getApp(['Router']);
    const shopModule = reactive({
      /*跳转至店铺详情*/
      toDetails: function (shopId) {
        Router!.push({ name: 'shopDetails', query: { newsId: shopId }, replace: true });
      },
      /*店铺数据*/
      shopMessage: [
        {
          shopName: "Fano Studios",
          shopImage: "../../assets/images/shopImage01.png",
          shopIntroduce: "Fano Studios品牌，头部女装品牌之一，全网700万粉丝，追求“专注做好衣，苛求完美”的经营理念，致力于轻复古法式休闲风。",
          shopImages: [
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
          ]
        },
        {
          shopName: "Fano Studios",
          shopImage: "../../assets/images/shopImage01.png",
          shopIntroduce: "Fano Studios品牌，头部女装品牌之一，全网700万粉丝，追求“专注做好衣，苛求完美”的经营理念，致力于轻复古法式休闲风。",
          shopImages: [
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
          ]
        },
        {
          shopName: "Fano Studios",
          shopImage: "../../assets/images/shopImage01.png",
          shopIntroduce: "Fano Studios品牌，头部女装品牌之一，全网700万粉丝，追求“专注做好衣，苛求完美”的经营理念，致力于轻复古法式休闲风。",
          shopImages: [
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
            "../../assets/images/brandImage01.png",
            "../../assets/images/clothing-one.png",
          ]
        },

      ]
    })

    return {
      shopModule
    }
  }
});
</script>

<style lang="scss" scoped>
.tips-box {
  height: 30Px;
  margin-top: 80Px;
  background-color: #efefef;
  .center-front {
    padding: 7Px 0;
    text-align: center;
    font-size: 16Px;
    color:#222;
    font-weight: 400;
    font-style: normal;
  }
}
.container {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin-bottom: 100Px;
  .clothing-box {
    .top-filter-box {
      width: 100%;
      height: 104Px;
      .content-box {
        display: flex;
        justify-content: space-between;
        height: 24Px;
        padding: 50Px 50Px 30Px 50Px;
        .top-filter-left {
          width: 203Px;
          height: 26Px;
          color: #222;
          font-size: 26Px;
          font-style: normal;
          font-weight: 400;
          line-height: 24Px;
          overflow: hidden;
          text-overflow: ellipsis;

        }
        .top-filter-right {
          color: #222;
          font-size: 18Px;
          font-style: normal;
          font-weight: 400;
          overflow: hidden;
          text-overflow: ellipsis;
          .item-one {
            margin-right: 30Px;
            .front {
              margin-right: 9Px;
            }
          }
          .item-two {
            .front {
              margin-right: 9Px;
            }
          }
        }
      }
    }
    .center-container {
      display: flex;
      justify-content: space-between;
      margin: 0 50Px;
      .left-side {
        flex: 0 1 203Px;
        display: flex;
        flex-direction: column;
        min-height: 76vh;
        .all-clothing {
          width: 188Px;
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
          .clothing-item {
            width: 100%;
            height: 24Px;
            margin-bottom: 10Px;
            line-height: 24Px;
            &:hover {
              cursor: pointer;
            }
          }
        }
        .hr-style{
          display: block;
          width: 188Px;
          float: left;
          margin: 20Px 0 ;
          border: 1px solid #DFDFDF;
        }
        .season-filter {
          width: 100%;
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
          .season-title {
            width: 100%;
            height: 24Px;
            line-height: 24Px;
            margin-bottom: 16Px;
          }
          .season-item {
            width: 100%;
            margin-bottom: 10Px;
            padding: 4Px 0;
            input[type="radio"] {
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              border-radius: 0; /* 设置边框半径为0，使其变为正方形 */
              width: 16Px; /* 设置宽度 */
              height: 16Px; /* 设置高度 */
              border: 1Px solid #000; /* 添加边框 */
              margin-right: 15Px;
            }

            /* 添加选中状态的样式，例如改变背景颜色 */
            input[type="radio"]:checked {
              background-color: rgb(56,56,56); /* 选中时的背景颜色 */
              background-image: url("../../assets/images/select.png");
              background-size: contain; /* 调整背景图像的尺寸，保持比例 */
              background-position: center center; /* 将背景图像居中展示 */
              background-repeat: no-repeat; /* 不重复 */
            }
          }
        }
        .style-filter {
          width: 100%;
          color: #222;
          font-size: 16Px;
          font-style: normal;
          font-weight: 400;
        }
      }
      .right-side {
        flex: 1;
        margin-left: 30Px;
        .right-img-text {
          display: grid;
          grid-column-gap: 30Px;
          //grid-row-gap: 30Px;
          grid-template-columns: repeat(2, 784Px);
          .item-one {
            width: 100%;
            .img-box {
              width: 210Px;
              height: 300Px;
              margin-bottom: 30Px;
              margin-right: 20Px;
              img {
                //width: 100%;
                //height: 100%;
                width: 210Px;
                height: 300Px;
                &:hover {
                  cursor: pointer;
                }
              }
            }
            .shop-box {
              .shop-name {
                color: $color-main;
                font-family: "PingFang SC";
                font-size: $-pc-font-size-l;
                font-style: normal;
                font-weight: 400;
                line-height: 24Px; /* 100% */
                margin-bottom: 20Px;
              }
              .shop-introduce {
                color: $color-gray-9;
                font-family: "PingFang SC";
                font-size: $-pc-font-size-smm;
                font-style: normal;
                font-weight: 400;
                line-height: 28Px; /* 155.556% */
              }
              .shop-images {
                margin-top: 15Px;
                grid-template-columns: repeat(4, 131Px);
                grid-column-gap: 13Px;
                position: relative;
                .item-img-box:last-child::before {
                  position: absolute;
                  width: 131Px;
                  height: 100%;
                  content: "";
                  background-color: rgba(0, 0, 0, 0.5);
                  z-index: 1;
                }
                .item-img-box{
                  width: 131Px;
                  height: auto;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

              }
            }
          }
        }
      }
    }
  }
}
</style>



<!--<template>-->
<!--  <section class="container">-->
<!--    <div @click="toDetails()">toDetails</div>-->
<!--    <div v-if="isSign" class="notice">-->
<!--      <p>温馨提示：您当前是游客身份，暂无查看内容的权限，请您先</p>-->
<!--      <p>登录</p>-->
<!--      <p>或</p>-->
<!--      <p>注册</p>-->
<!--    </div>-->
<!--    <div class="shop-body">-->
<!--      <div class="shop-top"></div>-->
<!--      <div class="shop-layout">-->
<!--        <div class="shop-menu"></div>-->
<!--        <div class="shop-main">-->
<!--          <block ></block>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </section>-->
<!--</template>-->

<!--<script lang="ts">-->
<!--  import { defineComponent, ref } from 'vue';-->
<!--  import { getApp } from '@/common/hooks';-->
<!--  import { Messages } from '@/components/Warm/Popup';-->
<!--  import { Language } from '@/common/lang';-->

<!--  export default defineComponent({-->
<!--    name: "recruit",-->
<!--    components: {-->

<!--    },-->
<!--    data() {-->
<!--      return {-->

<!--      }-->
<!--    },-->
<!--    setup() {-->
<!--      const { proxy } = getApp(["Vm"]).Vm;-->
<!--      const isSign = ref(true);-->
<!--      const handle = () => {-->
<!--        Messages({});-->
<!--      }-->

<!--      const C = () => {-->
<!--        proxy.$i18n.locale = Language.xiaomaoen;-->
<!--      }-->

<!--      const toDetails = () => {-->
<!--        proxy.Router.push({path: '/shop/details'});-->
<!--        proxy.Router.push({path: '/home'})-->
<!--      }-->

<!--      return {-->
<!--        isSign,-->
<!--        toDetails,-->
<!--        handle,-->
<!--        C-->

<!--      }-->
<!--    }-->
<!--  });-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.container {-->
<!--  padding-top: 100Px;-->
<!--}-->
<!--.notice {-->
<!--  width: 100%;-->
<!--  height: 30Px;-->
<!--  text-align: center;-->
<!--  background-color: #EFEFEF;-->
<!--  p {-->
<!--    display: inline-block;-->
<!--    color: #222;-->
<!--    font-family: "PingFang SC";-->
<!--    font-size: 12Px;-->
<!--    font-style: normal;-->
<!--    font-weight: 400;-->
<!--    line-height: 30Px;-->
<!--    text-decoration-line: underline;-->
<!--  }-->
<!--}-->
<!--.shop-body {-->
<!--  margin: 0 50Px 0 50Px;-->
<!--  width: 100%;-->
<!--  .shop-top {-->
<!--    height: 60Px;-->
<!--    background-color: #EFEFEF;-->
<!--    margin-bottom: 10Px;-->
<!--    margin-top: 10Px;-->
<!--  }-->
<!--  .shop-layout {-->
<!--    display: grid;-->
<!--    grid-template-columns: 13% auto;-->
<!--    //grid-gap: 29Px;-->
<!--    grid-column-gap: 29Px;-->
<!--    .shop-menu {-->
<!--      height: 200Px;-->
<!--      background-color: #EFEFEF;-->
<!--    }-->
<!--    .shop-main {-->
<!--      background-color: #EFEFEF;-->
<!--    }-->
<!--  }-->

<!--}-->

<!--</style>-->
